<template>
	<view class="container">
		<view class="tui-page__hd">
			<view class="tui-page__title">Input</view>
			<view class="tui-page__desc">输入框组件是对原生input组件的增强，内置了常用布局样式，同时包含 input 所有功能。</view>
		</view>
		<view class="tui-page__bd">
			<view class="tui-title">默认使用</view>
			<tui-input borderTop placeholder="请输入姓名"></tui-input>
			<tui-input :lineLeft="false" placeholder="请输入手机号" maxlength="11"></tui-input>
			<view class="tui-title">带标题</view>
			<tui-input label="姓名" borderTop placeholder="请输入姓名"></tui-input>
			<tui-input label="联系电话" :lineLeft="false" placeholder="请输入手机号" maxlength="11"></tui-input>
			<view class="tui-title">带清除按钮</view>
			<tui-input label="姓名" borderTop placeholder="请输入姓名" clearable v-model="name"></tui-input>
			<tui-input label="联系电话" :lineLeft="false" placeholder="请输入手机号" clearable v-model="mobile" maxlength="11">
			</tui-input>
			<view class="tui-title">带边框</view>
			<tui-list-cell :hover="false">
				<tui-input padding="20rpx 30rpx" inputBorder placeholder="请输入姓名"></tui-input>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<tui-input padding="20rpx 30rpx" label="姓名" inputBorder placeholder="请输入姓名"></tui-input>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<tui-input padding="20rpx 30rpx" isFillet inputBorder placeholder="请输入姓名"></tui-input>
			</tui-list-cell>
			<tui-list-cell :hover="false">
				<tui-input padding="20rpx 30rpx" isFillet label="联系电话" inputBorder placeholder="请输入手机号" maxlength="11">
				</tui-input>
			</tui-list-cell>
			<view class="tui-title">必填项</view>
			<tui-input required label="姓名" borderTop placeholder="请输入姓名"></tui-input>
			<tui-input required label="联系电话" :lineLeft="false" placeholder="请输入手机号" maxlength="11"></tui-input>
			<view class="tui-title">文字居右 | 带单位</view>
			<tui-input textRight label="简介" borderTop placeholder="请输入一句话简介"></tui-input>
			<tui-input textRight label="百分比" :lineLeft="false" placeholder="请输入百分比">
				<template v-slot:right>
					<text>%</text>
				</template>
			</tui-input>
			<view class="tui-title">禁用</view>
			<tui-input label="姓名" borderTop placeholder="请输入姓名" disabled value="张三"></tui-input>
			<tui-input label="联系电话" :lineLeft="false" placeholder="请输入手机号" disabled value="13888889999" maxlength="11">
			</tui-input>
			<view class="tui-title">选择</view>
			<tui-list-cell arrow>
				<tui-input backgroundColor="transparent" :borderBottom="false" padding="0 20rpx 0 0" label="地区"
					placeholder="请选择地区" disabled></tui-input>
			</tui-list-cell>
			<view class="tui-title">右侧按钮</view>
			<tui-input padding="20rpx 30rpx" label="验证码" :lineLeft="false" placeholder="请输入验证码">
				<template v-slot:right>
					<tui-button type="gray-primary" width="200rpx" height="64rpx" :size="30" bold>获取验证码
					</tui-button>
				</template>
			</tui-input>
			<view class="tui-title">左侧自定义图标</view>
			<tui-input placeholder="请输入手机号">
				<template v-slot:left>
					<view class="tui-left__icon">
						<tui-icon name="mobile" color="#333" :size="40" unit="rpx"></tui-icon>
					</view>
				</template>
			</tui-input>
			<tui-input placeholder="请输入密码">
				<template v-slot:left>
					<view class="tui-left__icon">
						<tui-icon name="pwd" color="#333" :size="40" unit="rpx"></tui-icon>
					</view>
				</template>
			</tui-input>
			<view class="tui-title">更多使用请查看文档</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//v-model 双向绑定
				name: '',
				mobile: ''
			}
		},
		methods: {

		}
	}
</script>

<style>
	.tui-title {
		width: 100%;
		font-size: 28rpx;
		color: #888;
		padding: 40rpx 30rpx 20rpx;
		box-sizing: border-box;
	}

	.tui-left__icon {
		padding-right: 20rpx;
	}
</style>
